<!--  -->
<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>评论管理</el-breadcrumb-item>
            <el-breadcrumb-item>表白墙</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="10">
                <el-col :span="7">
                    <el-input v-model="queryInfo.query" placeholder="请输入查询内容" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search" @click="getCommentList"></el-button>
                    </el-input>
                </el-col>
            </el-row>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="评论id">
                      <span>{{ props.row.commentid }}</span>
                    </el-form-item>
                    <el-form-item label="评论人id">
                      <span>{{ props.row.userid }}</span>
                    </el-form-item>
                    <el-form-item label="评论帖子id">
                      <span>{{ props.row.postid }}</span>
                    </el-form-item>
                    <el-form-item label="评论人姓名">
                      <span>{{ props.row.username }}</span>
                    </el-form-item>
                    <el-form-item label="评论内容">
                      <span>{{ props.row.comment }}</span>
                    </el-form-item>
                    <el-form-item label="评论状态">
                      <span>{{ props.row.commenttype }}</span>
                    </el-form-item>
                    <el-form-item label="点赞量">
                      <span>{{ props.row.likenum }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column
                label="评论id"
                prop="commentid">
              </el-table-column>
              <el-table-column
                label="评论人id"
                prop="userid">
              </el-table-column>
              <el-table-column
                label="评论人姓名"
                prop="username">
              </el-table-column>
              <el-table-column
                label="评论状态"
                prop="commenttype"
                :filters="[{ text: '匿名', value: '匿名' }, { text: '公开', value: '公开' }]"
                :filter-method="filterStatus"
                filter-placement="bottom-end">
              </el-table-column>
              <el-table-column
                label="图片详情" width="80px">
                <template slot-scope="scope">
                  <el-button type="warning" icon="el-icon-picture" @click="showPostImage(scope.row)" circle></el-button>
                </template>
              </el-table-column>
              <el-table-column
                    fixed="right"
                    label="操作"
                    width="115" align="center">
                    <template slot-scope="scope">
                        <el-button @click="editClick(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
                        <el-button @click="deleteClick(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
                    </template>
                </el-table-column>
              <el-table-column
                label="评论时间"
                prop="commenttime" sortable column-key="date">
              </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pageNum"
                :page-sizes="[6, 10, 20, 30]"
                :page-size="queryInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>

        <el-dialog title="评论图片详情" :visible.sync="imageDialogVisible">
          <template v-for="(url, index) in commenturls">
           <el-popconfirm :key="url" title="确定要删除下面图片吗？" @onConfirm="deleteCommentImage(index)">
              <el-button type="danger" icon="el-icon-delete" circle style="margin-top:10px;margin-bottom:15px" slot="reference"></el-button>
            </el-popconfirm>
            <el-image style="width:100%" :key="url" :src="url" :preview-src-list="commenturls" lazy></el-image>
          </template>
        </el-dialog>

        <!-- 修改评论信息 -->
        <el-dialog
            title="修改帖子信息"
            :visible.sync="editDialogVisible"
            width="40%">
            <el-form :model="editForm" status-icon  ref="editFormRef" label-width="100px" class="demo-ruleForm">
                <el-form-item label="评论id" prop="postid">
                    <el-input type="text" v-model="editForm.commentid" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="评论人id" prop="userid">
                    <el-input type="text" v-model="editForm.userid" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="评论姓名" prop="username">
                    <el-input type="text" v-model="editForm.username" disabled autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="评论状态">
                    <el-radio-group v-model="editForm.commenttype" size="medium">
                    <el-radio border label="公开"></el-radio>
                    <el-radio border label="匿名"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="内容" prop="postcontent">
                    <el-input type="textarea" v-model="editForm.comment" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateCommentInfo">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>

// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      queryInfo: {
        query: '',
        categoryid: 1,
        pageNum: 1,
        pageSize: 6
      },
      total: 0,
      reverse: true,
      imageDialogVisible: false,
      editDialogVisible: false,
      commenturls: [],
      tableData: [],
      deleteImagepostid: '',
      deleteImageCommentid: '',
      editForm: []
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async getCommentList () {
      const { data: res } = await this.$axios.get('admin/getcomment', { params: this.queryInfo })
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.tableData = res.data
      this.total = res.count
    },
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      this.getCommentList()
    },
    handleCurrentChange (newPage) {
      this.queryInfo.pageNum = newPage
      this.getCommentList()
    },
    showPostImage (scopeRow) {
      this.imageDialogVisible = true
      this.commenturls = scopeRow.imageurl
      this.deleteImageCommentid = scopeRow.commentid
    },
    async deleteCommentImage (index) {
      const { data: res } = await this.$axios.delete('admin/deletecommentimage' + '/' + this.deleteImageCommentid + '/' + index)
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.$message.success(res.msg)
      this.getCommentList()
      this.imageDialogVisible = false
    },

    filterStatus (value, row, column) {
      const property = column.property
      return row[property] === value
    },

    editClick (scopeRow) {
      this.editDialogVisible = true
      this.editForm = scopeRow
    },
    async updateCommentInfo () {
      const { data: res } = await this.$axios.post('admin/updatecommentinfo', this.editForm)
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.$message.success(res.msg)
      this.editDialogVisible = false
    },
    deleteClick (scopeRow) {
      this.$confirm('此操作将永久删除该评论, 并删除该评论对应的点赞等, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$axios.delete('admin/deletecomment/' + scopeRow.commentid, {
          headers: {
            contentType: 'application/json;charset=UTF-8'
          }
        })
        if (res.code !== 200) {
          this.getCommentList()
          return this.$message.error(res.msg)
        } else {
          this.getCommentList()
          return this.$message.success(res.msg)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.getCommentList()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
